<template>
  <section>
    <div>拆分多列 Table</div>
    <el-table border
              :data="records"
              highlight-current-row>
      <el-table-column label="#"
                       type="index" />
      <template v-for="(column, index) in listColumn">
        <el-table-column v-if="column.name === 'fromInfo'"
                         :key="index"
                         :prop="column.name"
                         :label="column.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{scope.row.fromInfoName}}<br />
            {{scope.row.fromInfoCtName}} {{scope.row.fromInfoCtMobile}}
          </template>
        </el-table-column>
        <el-table-column v-else-if="column.name === 'fromAddress'"
                         :key="index"
                         :prop="column.name"
                         :label="column.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{scope.row.fromInfoArea}}<br />
            {{scope.row.fromInfoAddress}}
          </template>
        </el-table-column>
        <el-table-column v-else-if="column.name === 'toInfo'"
                         :key="index"
                         :prop="column.name"
                         :label="column.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{scope.row.toInfoName}}<br />
            {{scope.row.toInfoCtName}} {{scope.row.toInfoCtMobile}}
          </template>
        </el-table-column>
        <el-table-column v-else-if="column.name === 'toAddress'"
                         :key="index"
                         :prop="column.name"
                         :label="column.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{scope.row.toInfoArea}}<br />
            {{scope.row.toInfoAddress}}
          </template>
        </el-table-column>
        <el-table-column v-else-if="column.name === 'orderInfo'"
                         :key="index"
                         :prop="column.name"
                         :label="column.label"
                         :show-overflow-tooltip="true">
          <template>
            整车 | 长途<br />
            装货 | 卸货<br />
            50.00公斤 | 0.85方 | 100件
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="index"
                         :prop="column.name"
                         :label="column.label"
                         :show-overflow-tooltip="true">
        </el-table-column>
      </template>
    </el-table>
  </section>
</template>

<script>
export default {
  data () {
    return {
      listColumn: [
        { label: "合同编号", name: "contractNo" },
        { label: "发货时间", name: "fromTime" },
        { label: "要求到货时间", name: "toTime" },
        { label: "发货方信息", name: "fromInfo" },
        { label: "发货方地址", name: "fromAddress" },
        { label: "收货方信息", name: "toInfo" },
        { label: "收货方地址", name: "toAddress" },
        { label: "订单信息", name: "orderInfo" },
      ],
      records: [
        {
          contractNo: "wly001",
          fromTime: "2023-08-08 00:59", toTime: "2023-08-11 23:59",
          fromInfoName: '李想有限公司', fromInfoCtName: '李想', fromInfoCtMobile: "158227114774",
          fromInfoArea: "湖南省长沙市岳麓区", fromInfoAddress: "麓谷企业广场F4栋1701室",
          toInfoName: '老板电器有限公司', toInfoCtName: '王红', toInfoCtMobile: "158227114774",
          toInfoArea: "湖南省长沙市长沙县", toInfoAddress: "鑫创安智能物流园（青园路）1号仓库",
        },
        {
          contractNo: "wly002",
          fromTime: "2023-08-08 00:59", toTime: "2023-08-11 23:59",
          fromInfoName: '湖南南软科技有限公司', fromInfoCtName: '李想', fromInfoCtMobile: "158227114774",
          fromInfoArea: "湖南省长沙市岳麓区", fromInfoAddress: "麓谷企业广场F4栋",
          toInfoName: '溧阳市亿路顺供应链管理有限公司', toInfoCtName: '王红', toInfoCtMobile: "158227114774",
          toInfoArea: "湖南省长沙市长沙县", toInfoAddress: "鑫创安智能物流园（青园路）6栋1号仓库10号门",
        }
      ]
    };
  },
}
</script>

<style>
</style>